<div>
    <div class="row flex-items-xs-between">
        <div class="col-xs-4">
            <div class="title-container">
                <div class="chart-name-span">
                    {{chartName | translate}}
                </div>
                <div>
                    {{roleName | translate}}
                </div>
            </div>
        </div>
    </div>

    <div class="row version-tool">
        <div class="toolbar">
            <div class="row flex-items-xs-right option-right rightPos">
                <div class="flex-xs-middle">
                    <hbr-filter [withDivider]="true" filterPlaceholder="{{'HELM_CHART.FILTER_FOR_CHARTS' | translate}}" [currentValue]="lastFilteredVersionName"></hbr-filter>
                    <span class="card-btn" (click)="showCard(true)" (mouseenter)="mouseEnter('card') " (mouseleave)="mouseLeave('card')">
                        <clr-icon [ngClass]="{'is-highlight': isCardView || isHovering('card') }" shape="view-cards"></clr-icon>
                    </span>
                    <span class="list-btn" (click)="showCard(false)" (mouseenter)="mouseEnter('list') " (mouseleave)="mouseLeave('list')">
                        <clr-icon [ngClass]="{'is-highlight': !isCardView || isHovering('list') }" shape="view-list"></clr-icon>
                    </span>
                    <span class="filter-divider"></span>
                    <span class="refresh-btn" (click)="refresh()">
                        <clr-icon shape="refresh"></clr-icon>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div *ngIf="!isCardView" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading" [(clrDgSelected)]="selectedRows">
                <clr-dg-action-bar>
                    <button type="button" class="btn btn-sm btn-secondary"
                    [disabled]="!hasProjectAdminRole"
                    (click)="versionUpload($event)">
                        <clr-icon shape="upload" size="16"></clr-icon>&nbsp;{{'HELM_CHART.UPLOAD' | translate}}</button>
                    <button type="button" class="btn btn-sm btn-secondary"
                    [disabled]="!(selectedRows.length===1)"
                    (click)="versionDownload()">
                        <clr-icon shape="download" size="16"></clr-icon>&nbsp;{{'HELM_CHART.DOWNLOAD' | translate}}</button>
                    <button type="button" class="btn btn-sm btn-secondary"
                    [disabled]="selectedRows.length<=0 || !hasProjectAdminRole"
                    (click)="openVersionDeleteModal(selectedRows)">
                        <clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'BUTTON.DELETE' | translate}}</button>
                </clr-dg-action-bar>
                <clr-dg-column [clrDgField]="'name'">{{'HELM_CHART.VERSION' | translate}}</clr-dg-column>
                <clr-dg-column>{{'HELM_CHART.ENGINE' | translate }}</clr-dg-column>
                <clr-dg-column>{{'HELM_CHART.MAINTAINERS' | translate }}</clr-dg-column>
                <clr-dg-column>{{'HELM_CHART.CREATED' | translate }}</clr-dg-column>
                <clr-dg-row *ngFor="let v of chartVersions" [clrDgItem]="v">
                    <clr-dg-cell>
                        <span class="list-img"><img [src]="getImgLink(v)"/></span>
                        <a href="javascript:void(0)" (click)="onVersionClick(v)">{{ v.version }}</a>
                    </clr-dg-cell>
                    <clr-dg-cell>{{ v.engine }}</clr-dg-cell>
                    <clr-dg-cell>{{ getMaintainerString(v.maintainers) }}</clr-dg-cell>
                    <clr-dg-cell>{{ v.created | date}}</clr-dg-cell>
                </clr-dg-row>
                <clr-dg-footer>
                    <clr-dg-pagination #pagination [clrDgPageSize]="pageSize">
                        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'HELM_CHART.OF' | translate}} {{pagination.totalItems}} {{'HELM_CHART.VERSIONS'
                        | translate}}
                    </clr-dg-pagination>
                </clr-dg-footer>
            </clr-datagrid>
        </div>
    </div>
    <div *ngIf="isCardView" class="row card-container">
        <div *ngFor="let item of chartVersions;" class="col-lg-3 col-md-4 col-sm-6">
            <a let i=index; class="card clickable" (click)="onVersionClick(item)">
                <div class="card-header">
                    <div class="card-media-block">
                        <img [src]="getImgLink(item)"/>
                        <div class="card-media-description">
                            <span class="card-media-title">{{item.name}}</span>
                            <p class="card-media-text">{{item.home}}</p>
                        </div>
                    </div>
                </div>
                <div class="card-block">
                    <div class="form-group">
                        <label>{{'HELM_CHART.ENGINE' | translate}}</label>
                        <div>{{item.engine}}</div>
                    </div>
                    <div class="form-group">
                        <label>{{'HELM_CHART.MAINTAINERS' | translate}}</label>
                        <div>{{getMaintainerString(item.maintainers)}}</div>
                    </div>
                    <div class="form-group">
                        <label>{{'HELM_CHART.VERSION' | translate}}</label>
                        <div>{{item.appVersion}}</div>
                    </div>
                </div>
                <div class="card-footer">
                    <clr-dropdown [clrCloseMenuOnItemClick]="false">
                        <button type="button" class="btn btn-link" (click)="versionDownload($event, item)">{{'HELM_CHART.DOWNLOAD' | translate}}</button>
                        <button type="button" class="btn btn-link" (click)="openVersionDeleteModal([item])">{{'BUTTON.DELETE' | translate}}</button>
                    </clr-dropdown>
                </div>
            </a>
        </div>
        <div *ngIf="loading" [ngClass]="{'central-block-loading': isFirstPage, 'central-block-loading-more': !isFirstPage}">
            <span class="vertical-helper"></span>
            <div class="spinner"></div>
        </div>
    </div>
    <clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
        <h3 class="modal-title">{{'HELM_CHART.UPLOAD_TITLE' | translate}}</h3>
        <div class="modal-body">
            <form #chartUploadForm="ngForm" enctype="multipart/form-data" (ngSubmit)="upload()">
                <section class="form-block">
                    <div class="form-group">
                        <label for="chart"> {{'HELM_CHART.CHART_FILE' | translate}} </label>
                        <input type="file" id="chart" name="chart" ngModel (change)="onChartFileChangeEvent($event)">
                    </div>
                    <div class="form-group">
                        <label for="prov"> {{'HELM_CHART.CHART_PROV' | translate}} </label>
                        <input type="file" id="prov" name="prov" ngModel (change)="onProvFileChangeEvent($event)">
                    </div>
                </section>
                <button type="submit" class="btn btn-secondary" [disabled]="isUploading">
                    <span *ngIf="!isUploading">{{'HELM_CHART.UPLOAD' | translate}}</span>
                    <span *ngIf="isUploading" class="spinner spinner-inline">
                        Loading...
                    </span>
                </button>
            </form>
        </div>
    </clr-modal>
    <confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
</div>